<!-- Navbar.vue -->
<template>
  <div class="navbar-container">
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      background-color="#d40000"
      text-color="#ffffff"
      active-text-color="#ffffff"
      @select="handleSelect"
      class="navbar-menu"
    >
      <!-- 导航项 -->
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">录课视频</el-menu-item>
      <el-menu-item index="3">语文</el-menu-item>
      <el-menu-item index="4">数学</el-menu-item>
      <el-menu-item index="5">英语</el-menu-item>
      <el-menu-item index="6">理化生</el-menu-item>
      <el-menu-item index="7">政史地</el-menu-item>
      <el-menu-item index="8">教辅答案</el-menu-item>
      <el-menu-item index="9">小学版</el-menu-item>
      <el-menu-item index="10">套卷</el-menu-item>
      <el-menu-item index="11">商城</el-menu-item>
      <el-menu-item index="12">充值中心</el-menu-item>

      <!-- 咨询按钮（特殊样式） -->
      <span class="consult-link" @click="goToConsult">
        咨询>>
      </span>
    </el-menu>
  </div>
</template>

<script setup name="Navbar">
import { ref } from 'vue'

// 默认激活首页
const activeIndex = ref('1')

const handleSelect = (index) => {
  console.log('点击了：', index)
  // 可以根据 index 跳转路由或执行其他逻辑
}

const goToConsult = () => {
  window.open('https://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes', '_blank')
}
</script>

<style scoped>
.navbar-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.navbar-menu {
  border-bottom: none;
  padding: 0;
}

.navbar-menu .el-menu-item {
  min-width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  transition: all 0.3s ease;
  border-right: 1px solid #a00000;
}

.navbar-menu .el-menu-item:hover {
  background-color: #b00000 !important;
  color: #fff !important;
}

.navbar-menu .el-menu-item.is-active {
  background-color: #400000 !important;
  color: #fff !important;
}

/* 咨询链接样式 */
.consult-link {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
  color: #ffd700;
  cursor: pointer;
  padding: 0 20px;
  background-color: #d40000;
  border-left: 1px solid #a00000;
  border-right: 1px solid #a00000;
  transition: all 0.3s ease;
}

.consult-link:hover {
  background-color: #b00000;
  color: #ffeb3b;
  text-decoration: underline;
}
</style>